<template>
    <!-- 模态弹框 -->
    <div id="modal" v-show="showModal">
      <div @click="closes()" class="modal-mask" :class="maskBack"></div>
      <div class="modal-body">
        <div class="modal__hd">
          <h3 class="modal__hd_text" v-if="title">{{title}}</h3>
          <slot v-else name="modal__hd"></slot>
        </div>  
        <div class="modal__bd">
          <p class="modal__bd_text" v-if="msg&&type === 'alert'">{{msg}}</p>
          <div v-else-if="msg&&type === 'confirm'" class="input_box">
            <input type="text" :placeholder="msg" name="userid" ref="modalval">
          </div>
          <slot v-else name="modal__bd"></slot>
        </div>
        <div v-if="type === 'confirm'" class="modal__ft flex">
          <!-- 底部根据type改变 -->
          <button class="btn modal__btn modal__btn_primary" @click="confirm()">确定</button>
          <button class="btn modal__btn modal__btn_default" @click="closes()">取消</button>
        </div>
        <div v-else-if="type === 'alert'" class="modal__ft">
          <!-- 底部根据type改变 -->
          <button class="btn modal__btn modal__btn_alert" @click="closes()">知道了</button>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      showModal: false,
      type: "alert", // 弹框类型默认为 alert
      title: null, // 弹框标题
      msg: null, // 弹框信息
      maskBack: "" //设置遮罩层样式 默认不添加
    };
  },
  // 本组件不适合开放传递接口【因为需要使用者编写弹框内的代码】
  // props: ["maskStyle"],
  methods: {
    closes() {
      //关闭弹框
      this.showModal = false;
      //初始化一下，保证每次都是一个全新的弹框
      this.type = "alert";
      this.title = "";
      this.msg = "";
      this.maskBack = "";
    },
    opens(type, title, msg) {
      //开启弹框
      this.showModal = true;
      //设置弹框中的参数值
      this.type = type;
      this.title = title;
      this.msg = msg;
    },
    confirm() {
      //子调父 组件：子  模板：父
      this.$emit("on-confirm");
      this.closes();
    },
    //获取表单值
    getVal() {
      if (this.$refs.modalval) {
        return this.$refs.modalval.value;
      }
    }, //修改遮罩层样式 默认为不透明
    setMaskClass(back) {
      this.maskBack = back || "maskBackNo";
    }
  }
};
</script>
<style scoped>
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 模态弹框 */
.modal-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.modal-body {
  position: fixed;
  z-index: 5000;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
  border-radius: 0.1rem;
  overflow: hidden;
}
.modal__bd {
  padding: 0 1.6em 0.8em;
  word-wrap: break-word;
  word-break: break-all;
  color: #999;
}
.modal__hd_text {
  padding: 1.3em 1.6em 0.5em;
}
.modal__bd_text {
  font-size: 0.3rem;
  line-height: 0.5rem;
}

.input_box input {
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
  width: 80%;
  font-size: inherit;
  color: inherit;
  height: 0.8rem;
  line-height: 0.8rem;
}

.modal__ft {
  position: relative;
  line-height: 0.8rem;
  font-size: 0.35rem;
  padding: 0.4rem;
}
.modal__ft:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #d5d5d6;
  color: #d5d5d6;
  transform-origin: 0 0;
  transform: scaleY(0.5);
}
.modal__btn {
  position: relative;
  display: block;
  font-size: 0.3rem;
  color: #fff;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 45%;
  height: 0.8rem;
  border-radius: 5px;
  margin: 0 auto;
}
.modal__btn_primary,
.modal__btn_alert {
  background-color: #108ee9;
}
.modal__btn_default {
  color: rgb(139, 139, 139);
}
.modal__btn_alert {
  width: 45%;
}
.modal__btn:after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  box-sizing: border-box;
  border-radius: 10px;
}
.maskBackNo {
  background: inherit;
}
</style>